<template>
  <contentModel
    v-if="visible"
    :title="props.siderFormTitle"
    @close="handleClose"
  >
    <a-form
      ref="formRef"
      :model="siderForm"
      :layout="layout"
      :disabled="!props.isEdit"
      auto-label-width
      :class="{ 'view-background': !props.isEdit }"
      @submit="handleSubmit"
    >
      <!-- <a-row :gutter="8">
        <a-col :span="24">
          <a-form-item
            field="rejectReason"
            label="退回原因"
            :rules="[{ required: true, message: '请填写退回原因！' }]"
          >
            <a-input
              v-model="siderForm.rejectReason"
              placeholder="请输入"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row> -->
      <a-row :gutter="8">
        <a-col :span="8">
          <a-form-item field="checkerUserCode" label="检验人员">
            <searchItemUser
              v-model="siderForm.checkerUserName"
              v-model:name="siderForm.checkerUserName"
              :title="'检验人员'"
              style="width: 100%"
              @handleOk="handleUserChange"
              @hander-clear="handerClear"
            />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="checkDate" label="检验日期">
            <a-date-picker v-model="siderForm.checkDate" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item
            field="checkResult"
            label="检验结论"
            :rules="[{ required: true, message: '请填写检验结论！' }]"
          >
            <dict-select
              v-model="siderForm.checkResult"
              allow-clear
              dict-type="checkResult"
              placeholder="请选择"
            ></dict-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="8">
        <a-col :span="8">
          <a-form-item
            field="qualifiedQty"
            label="合格数量"
            :rules="[{ required: true, message: '请填写合格数量！' }]"
          >
            <a-input v-model="siderForm.qualifiedQty" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="unqualifiedQty" label="不合格数量">
            <a-input v-model="siderForm.unqualifiedQty" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="checkLossQty" label="消耗数量">
            <a-input v-model="siderForm.checkLossQty" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="8">
        <a-col :span="8">
          <a-form-item field="approveNo" label="审批单号">
            <a-input v-model="siderForm.approveNo" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="approveResult" label="审批结果">
            <dict-select
              v-model="siderForm.approveResult"
              allow-clear
              dict-type="approveResult"
              placeholder="请选择"
            ></dict-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="unqualifiedNo" label="不合格品处理单号">
            <a-input v-model="siderForm.unqualifiedNo" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="8">
        <a-col :span="8">
          <a-form-item field="confineFlag" label="是否限用">
            {{ siderForm.confineFlag }}
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="confineProcuct" label="限用型号">
            {{ siderForm.confineProcuct }}
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="confineBatch" label="限用批次">
            {{ siderForm.confineBatch }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item field="confineDesc" label="限用说明">
            {{ siderForm.confineDesc }}
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="prtlotNo" label="质量编号">
            {{ siderForm.prtlotNo }}
          </a-form-item>
        </a-col>
        <!-- <a-col :span="8">
          <a-form-item field="facprtlotNo" label="厂内合格证号">
            <a-input v-model="siderForm.facprtlotNo" placeholder="请输入" />
          </a-form-item>
        </a-col> -->
      </a-row>
      <a-row :gutter="8">
        <a-col :span="8">
          <a-form-item field="checkBusinessNo" label="试验单号">
            <a-input v-model="siderForm.checkBusinessNo" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="notes" label="备注">
            <a-input v-model="siderForm.notes" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="calcBasis" label="三期起始依据">
            <dict-select
              v-model="siderForm.calcBasis"
              allow-clear
              dict-type="calcBasis"
              placeholder="请选择"
            ></dict-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="8">
        <a-col :span="8">
          <a-form-item field="validateDate" label="有效期">
            <a-date-picker v-model="siderForm.validateDate" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="recheckDate" label="下次复验期">
            <a-date-picker v-model="siderForm.recheckDate" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="oilSealDate" label="下次油封期">
            <a-date-picker v-model="siderForm.oilSealDate" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-if="props.activeKey === 'rawMaterial'" :gutter="8">
        <a-col :span="8">
          <a-form-item field="testReportCode" label="试验报告编号">
            {{ siderForm.testReportCode }}
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="testDate" label="报告日期">
            {{ siderForm.testDate }}
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div v-if="props.isEdit" style="margin: 16px; text-align: right">
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>
  </contentModel>
</template>

<script lang="ts" setup>
  import searchItemUser from '@/common/components/search-modal/user.vue';
  import dictSelect from '@/common/components/dict-select/index.vue';
  import { defineAsyncComponent, ref } from 'vue';
  import { checkBill } from '@/api/admission/inspection';
  import { Message } from '@arco-design/web-vue';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const formRef = ref();
  const layout = ref();
  const visible = ref(true);
  const props = defineProps(['activeKey', 'isEdit', 'siderFormTitle']);
  const emit = defineEmits(['handleClose']);
  const siderForm = ref({
    rejectReason: '',
    checkerUserCode: '',
    checkDate: '',
    checkResult: '',
    qualifiedQty: '',
    unqualifiedQty: '',
    checkLossQty: '',
    approveNo: '',
    approveResult: '',
    unqualifiedNo: '',
    confineFlag: '',
    confineProcuct: '',
    confineBatch: '',
    confineDesc: '',
    prtlotNo: '',
    facprtlotNo: '',
    checkBusinessNo: '',
    notes: '',
    calcBasis: '',
    validateDate: '',
    recheckDate: '',
    oilSealDate: '',
    testReportCode: '',
    testDate: '',
    checkerUserName: '',
    checkerUserId: '',
  });

  layout.value = !props.isEdit ? 'horizontal' : 'vertical';
  // 筛选弹出清除
  const init = async (data) => {
    Object.assign(siderForm.value, data);
  };
  const handerClear = () => {
    console.log('ssss');
  };
  const handleClose = () => {
    emit('handleClose');
  };
  const handleUserChange = (val) => {
    siderForm.value.checkerUserName = val.username;
    siderForm.value.checkerUserId = val.id;
  };
  const handleSubmit = () => {
    formRef.value.validate(async (validate) => {
      if (!validate) {
        const { data } = await checkBill(siderForm.value);
        if (data) {
          Message.success('保存成功');
          emit('handleClose');
        }
        console.log(siderForm.value);
      }
    });
  };
  defineExpose({ init });
</script>

<style lang="less" scoped>
  /deep/ .arco-picker {
    width: 100%;
  }

  .view-background {
    padding: 16px;
    background: #f7f9fc;
  }
</style>
